@charset "UTF-8";
/*=====================
    HEADER STRAT
=======================*/
#header{
    width:100%;
    height:500px;
    background-color: pink;
    background: url("../images/banner/banner-1.jpg") no-repeat 0 0 / cover;
    cursor: pointer;
}
#header .container .logo{
    margin-right:100px;
    padding-top:20px;
    width:120px;
    height:30px;
    color:#fff;
}
#header .container .logo h1{
    font-size:0;
}
#header .container .logo .iconfont{
    font-size:20px;
}

/*===nav strat=====*/

#header .container .nav ul li{
    margin-left:20px;
    padding-right:20px;
    padding-top:30px;
    font-size:14px;
    color:#fff;
    line-height:20px;
}
#header .container  .nav ul li:hover a{
    color:#00beff;
}
/*===nav end=====*/

/*===nav-list strat=====*/
#header .container .nav .nav-list{
    overflow: hidden;
    top:56px;
    left:0;
    width:100%;
    height: 0px;
    transition:0.5s;
    background-color: transparent;
}
#header .container .nav .nav-list img{
    width:100px;
    margin-bottom:8px;
}
#header .container .nav .nav-list img:hover{
    opacity: .8;
}
#header .container .nav .nav-list ul li{
    padding-top:20px;
    text-align:center;
}
#header .container  .nav  .nav-list ul li a{
    color:#000;
}
#header .container .nav .nav-list ul li .title{
    margin-top:4px;
    margin-bottom:4px;
    font-size:8px;
}
#header .container .nav .nav-list ul li .price{
    margin-bottom:20px;
    font-size:6px;
}
#header .container .nav ul li a:hover + .nav-list{
    height:200px;
    background-color: #fff;
    border-top:1px solid #000;
}
/*===nav-list end=====*/

/*======download strat==========*/
#header .container .nav .download{
    overflow: hidden;
    top:56px;
    left:0;
    width:100%;
    height: 0px;
    transition:0.5s;
    background-color: transparent;
}
#header .container .nav .download img{
    width:100%;
}
#header .container .nav ul li a:hover + .download{
    height:350px;
    background-color: #fff;
    border-top:1px solid #000;
}
/*======download end==========*/


/*======search strat===========*/
#header .container .search{
    top:30px;
    right:380px;
    width:100px;
    height:20px;
}
#header .container .search .search-p{
    width:158px;
    height:24px;
    padding-left:20px;
    color:#999;
    border-radius: 50px;
    outline:0;
    border:0;
}
#header .container .search .iconfont{
    top:-2px;
    left:156px;
    font-size:20px;
}
/*======search end===========*/


/*======info strat===========*/
#header .container .info{
    top:30px;
    right:270px;
}
#header .container .info .iconfont{
    font-size:20px;
    color:#848484;
}
#header .container .signin{
    display: none;
    top:60px;
    right:250px;
    width:60px;
    height:100px;
    background-color: #fff;
    text-align:center;
    border-radius: 4px;
}
#header .container .signin::before{
    content:"";
    position:absolute;
    top:-6px;
    right:20px;
    height:0;
    border:10px solid transparent;
    border-bottom-color:#fff;
    border-top:none;

}
#header .container .signin a{
    padding-top:8px;
    font-size:10px;
    color:#515151;
}
#header .container .signin a:hover{
    color:#00beff;
}
#header .container .info:hover + .signin{
    display: block;
}
/*======info end===========*/

/*=====shopping-cart strat========*/

#header .container .shopping-cart{
    top:29px;
    right:238px;

}
#header .container .shopping-cart .iconfont{
    font-size:20px;
    color:#999;
}
#header .container .shopping-cart .num{
    top:0px;
    right:-6px;
    width:18px;
    height:14px;
    color:#fff;
    text-align:center;
    background-color: red;
    border-radius: 8px;
}
/*=====shopping-cart end========*/

/*=====================
    HEADER END
=======================*/